import React, { useState, useEffect } from 'react'
import { Table, Avatar, Image, Input, Space } from 'antd'

const { Search } = Input

interface ContactProps {}
interface UserInterface {
  key: number
  name: string
  remark: string
}
let dataSourceTemp: UserInterface[] = []

for (let index = 0; index < 10; index++) {
  dataSourceTemp.push({
    key: index,
    name: '第' + index + '个',
    remark: 'remark',
  } as UserInterface)
}

const Contact: React.FC<ContactProps> = (props: ContactProps) => {
  const [tableLoading, setTableLoading] = useState(false)
  const [dataSource, setDataSource] = useState(dataSourceTemp)
  useEffect(() => {
    setTableLoading(false)
    setDataSource(dataSourceTemp)
  }, [])
  const columns = [
    {
      title: '用户列表',
      dataIndex: 'name',
      key: 'name',
      render: (text: string, record: UserInterface, index: number) => {
        return (
          <Space size={12}>
            <Avatar
              src={
                <Image
                  src='https://joeschmoe.io/api/v1/random'
                  style={{ width: 32 }}
                />
              }
            />

            <Space size={4} direction='vertical'>
              <div style={{ color: 'green' }}>{record.name}</div>
              <div style={{ color: 'gray' }}>{record.remark}</div>
            </Space>
          </Space>
        )
      },
    },
  ]
  return (
    <Space direction='vertical' size='small'>
      <Search
        placeholder='input search loading with enterButton'
        loading={false}
        enterButton
        onSearch={(value) => console.log(value)}
        allowClear
      />
      <Table
        rowKey='key'
        size='small'
        dataSource={dataSource}
        columns={columns}
        loading={tableLoading}
        pagination={false}
        scroll={{
          scrollToFirstRowOnChange: true,
          y: 'calc(100vh - 64px - 40px - 40px - 100px)',
        }}
      />
    </Space>
  )
}

export default Contact
